<template>
	<view class="m-number inline" :style="{color:color}">
		<text :style="p1" v-if="leftText">{{leftText}}</text>
		<text :style="p1">{{numArr}}</text>
		<text :style="p2" v-if="units" class="ml-4">{{units}}</text>
	</view>
</template>

<script>
	import { array } from '@/libs/fn/verify.js'
	import { formatMoney, numberFormat } from '@/filters/index.js'
	export default {
		name: "m-number",
		data() {
			return {
				units: '',
			};
		},
		props: {
			//单位后缀
			unit: {
				type: String,
				default: '',
			},
			//传入的价格
			value: {
				type: [String, Number],
				default: '0.00'
			},
			//传入的价格
			leftText: {
				type: String,
				default: ''
			},
			//是否显示小数点  默认显示
			fill: {
				type: [String, Number],
				default: 2,
			},
			//千位分割
			format: {
				type: Boolean,
				default: true,
			},
			//万位分割
			qe: {
				type: Boolean,
				default: false,
			},
			//大小比例 数组形式
			size: {
				type: [Array, String, Number],
				default: () => [36, 26]
			},
			color: {
				type: String,
				default: '#07bc77'
			},
			weight: {
				type: [String, Number],
				default: '500'
			},
		},
		watch: {
			unit(val) {
				this.units = val;
			}
		},
		mounted() {
			this.units = this.unit;
		},
		computed: {
			numArr() {
				if (this.qe) {
					const num = numberFormat(this.value, this.fill);
					this.units = num['unit'];
					console.log(this.units)
					return num['value']
				}
				//默认处理为小数
				const num = this.integer(this.value, this.fill, true)
				if (this.format) {
					return formatMoney(num, this.fill)
				}
				return num
			},
			p1() {
				const size = array(this.size) ? this.size[0] : this.size;
				return {
					"font-weight": this.weight,
					'font-size': size + 'rpx'
				}
			},
			p2() {
				const size = array(this.size) ? this.size[1] : this.size;
				return {
					'font-size': size + 'rpx'
				}
			}
		},
	}
</script>

<style lang="scss">
	.m-number {}

	text:nth-of-type(1) {
		padding-right: 5rpx;
	}
</style>
